<!--
 * @Description: 
 * @Autor: MQJ
 * @Date: 2021-07-03 11:07:05
 * @LastEditors: MQJ
 * @LastEditTime: 2021-07-04 10:07:33
-->
<template>
  <!-- 订单详情 -->
  <div id="OrderDetails">
    <!-- 订单详情 -->
    <!-- {{ this.$route.query }} -->
    <!-- 订单顶部 -->
    <div class="header">
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- {{ userData[0].orderLines[0].product }} -->
    <div v-if="orderLines == 0">
      <van-empty description="暂时没有数据" />
    </div>

    <div v-else>
      <!-- 商品卡片展示区 -->
      <div class="cardShow">
        <van-card
          class="barDetails"
          v-for="product in product"
          :key="product.id"
          :price="total"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        />
      </div>
      <!-- 价格总计 -->
      <div class="priceTotal">
        <div class="van-hairline--top"></div>
        <p style="font-size: 10px; float: right">
          总计:<span style="color: red">￥{{ total }}</span>
        </p>
      </div>
    </div>
    <!-- 信息展示区 -->
    <div class="detailsShow">
      <!-- <p>服务地址：{{ data.address }}</p>
      <p>联系方式:{{ data.admin }}{{ data.telephone }}</p>
      <p>服务地址：{{ data.orderTime }}</p>
      <p>服务地址：{{ data.serviceTime }}</p>
      <p>服务地址：{{ data.status }}</p> -->
      <div style="padding: 1em 0.5em">
        <p>服务地址：{{ data[0] }}</p>
        <p>联系方式:{{ data[1] }}({{ data[2] }})</p>
        <p>下单时间：{{ data[3] | filter }}</p>
        <p>服务时间：{{ data[4] | filter }}</p>
        <p>{{ data[5] }}</p>
      </div>
    </div>
    <div class="footer" style="height: 100px"></div>
  </div>
</template>

<script>
// 引入axios
import { get, post, post_json } from "@/http/axios";
// 引入时间模块
import moment from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      userData: [],
      total: 0,
      orderLines: 0,
      product: [],
      // address: "",
      data: [],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //方法集合
  methods: {
    /**
     * @description:左侧返回按钮
     * @param {*}
     * @return {*}
     * @author: MQJ
     */
    onClickLeft() {
      this.$router.go(-1);
    },
    /**
     * @description:获取相关产品信息
     * @param {*}
     * @return {*}
     * @author: MQJ
     */
    async getAllOrderData() {
      // 获取数据
      let list = {
        id: this.$route.query.id,
      };
      let res = await get("/order/findById", list);
      // console.log(res.data.data.list);

      //通过路由传值，获取传过来的id信息，并对其进行过滤
      this.userData = res.data.data;
      // console.log(this.userData);
      // 获取价格的总价
      this.total = this.userData.total;
      // console.log(this.total);
      // 对其订单详情的数据进行长度计算
      this.orderLines = this.userData.orderLines.length;
      // console.log(this.orderLines);
      // 如果订单数量为1，则对其product进行赋值
      // if (this.orderLines == 1) {
      //   this.product.push(this.userData[0].orderLines[0].product);
      //   console.log(this.product);
      //   // console.log(this.userData[0].orderLines[0].product.description);
      // }
      // 如果订单数量为1，则对其product进行赋值
      if (this.orderLines > 0) {
        // console.log(this.userData[0].orderLines[1].product);
        // console.log(this.userData[0].orderLines[0]);
        for (let index = 0; index < this.orderLines; index++) {
          this.product.push(this.userData.orderLines[index].product);
          // console.log(this.userData[0].orderLines[index].product);
          // console.log(this.userData[0].orderLines[index].product.name);
        }
        // console.log(this.product);
        let address =
          this.userData.address.province +
          this.userData.address.city +
          this.userData.address.area +
          this.userData.address.address;
        // console.log(address);
        let admin = this.userData.customer.username;
        // console.log(admin);
        let telephone = this.userData.customer.telephone;
        let orderTime = this.userData.orderTime;
        // console.log(orderTime);
        let serviceTime = this.userData.serviceTime;
        // console.log(serviceTime);
        let status = this.userData.status;
        // console.log(status);
        this.data = [address, admin, telephone, orderTime, serviceTime, status];
      }
    },
  },
  filters: {
    filter: function (data) {
      return moment(data).format("YYYY/MM/DD上午hh:mm:ss");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 通过id获取该用户的相关订单信息
    this.getAllOrderData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.cardShow {
  margin: 5px;
}
.barDetails {
  border-radius: 15px;
  box-shadow: 1px 1px 1px 1px rgb(143 66 255 / 40%);
  background-color: #fff;
}
.priceTotal {
  margin-top: 20px;
}
.detailsShow {
  background-color: #fafafc;
  margin-top: 90px;
  margin-bottom: 0.5em;
  font-size: 12px;
  color: #999;
}
p {
  margin: 10px;
}
.detailsShow p:last-child {
  margin-bottom: 0;
  text-align: right;
}
</style>
